<template>
 <el-container>
        <el-header class="header">
            <div class="left-panel">
                <el-form class="search-form" ref="formRefSearch" :inline="true" :model="formSearch">
                    <el-form-item prop="LoginName">
                        <el-input v-model="formSearch.LoginName" placeholder="登录名" clearable class="!w-[180px]" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" icon="Search" @click="onSearch">搜索</el-button>
                        <el-button type="info" icon="RefreshLeft" @click="resetForm(formRefSearch)">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>           
        </el-header>
        <el-main class="main">
            <el-table border :data="userArr" height="calc(100vh - 220px)" :stripe="true" :highlight-current-row="true">
                <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
                <el-table-column label="登录ID" prop="userId" align="center">
                </el-table-column>
                <el-table-column label="登录名" prop="userName" align="center">
                </el-table-column>          
                <el-table-column label="登录时间" prop="onLineTime" align="center">
                </el-table-column>            
            </el-table>          
        </el-main>
    </el-container>
</template>

<script lang='ts' setup>
import { ref, reactive, onMounted } from 'vue';
import { getOnlineUserListApi } from "@/api/modules/user";

let userArr = ref([]);
let formSearch = reactive({
    LoginName: ''
})
const loading = ref(false);
let formRefSearch = ref();

onMounted(() => {
    getUser();
});
const getUser = async () => {
    let result = await getOnlineUserListApi({...formSearch});
    if (result?.status == 200) {
        userArr.value = result.response;
    }
}
const onSearch = () => {
    loading.value = true;
    getUser();
    loading.value = false;
}
const resetForm = (formEl) => {
    if (!formEl) return;
    formEl.resetFields();
    onSearch();
}
</script>
<style scoped lang='scss'></style>